<template>
  <div>
    路由案例<br/>

    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/jump">普通跳转</router-link><br/>
    <router-link to="/name">获取到路由name的值</router-link><br/>
    <router-link to="/params/123/hjy">地址栏传递参数</router-link><br/>
    <router-link to="/params/haha/hjy">地址栏传递参数，加入正则，无法调转</router-link><br/>

    <!-- 在地址栏上看不到参数 -->
    <router-link :to="{ name: 'paramsMultiple', params: { username: 'hjy', age: 88 }}">多个参数传递，在地址栏上看不到参数</router-link><br/>
    <!-- 带查询参数，下面的结果为/paramsMultiple?username=zz&age=22 -->
    <router-link :to="{ path: 'paramsMultiple', query: { username: 'zz', age: 22 }}">多个参数传递，地址栏上带参数</router-link><br/>

    <router-link to="/bar/son">子路由</router-link><br/>
    <router-link to="/leftAndRight">单页面多路由区域操作（返回功能）</router-link><br/>


    <button @click="goHome">前进</button>

  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    goHome () {
      this.$router.push('/bar')
    }
  }
}
</script>

<style scoped>

</style>
